<!-- 新建文件 -->
<template>
  <el-container class="home-view">
    <!-- 搜索区域 -->
    <el-header class="search-section">
      <ArticleSearch />
    </el-header>

    <!-- 文章列表区域 -->
    <el-main class="articles-section">
      <Articles
        :articles="articles"
        :total="total"
        :page="page"
        :limit="limit"
        :loading="loading"
        :error="error"
        @update:page="fetchArticles"
      />
    </el-main>

    <!-- 作者信息区域 -->
    <el-footer class="author-section">
      <AuthorInfo />
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Articles from '../components/Articles.vue';
import ArticleSearch from '../components/ArticleSearch.vue';
import AuthorInfo from '../components/AuthorInfo.vue';
// 页面加载时获取数据
onMounted(async () => {
});
</script>

<style scoped>
.search-section {
  height: 1%;
}

.author-section {
  height: 10%;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
}
</style>